<template>
  <div>

     <mt-header fixed title="发表">
      <router-link to="/" slot="left">
         <mt-button icon="back">返回</mt-button>
       </router-link>
       </mt-header>
    
     <mt-field  placeholder="您的昵称" type="textarea" rows="1" v-model='newsjson.myname'></mt-field>
    <mt-field  placeholder="分享新鲜事" type="textarea" rows="6" v-model='newsjson.mytext'></mt-field>
    <mt-popup v-model="popupVisible2" position="top" class="mint-popup-2" :modal="false">
      <p>发送成功</p>
    </mt-popup>
    <div>
        <mt-button plain size="large" type="default" class="send"  @click="addtext(newsjson)">发表</mt-button>
     </div>
  </div>
</template>
<script>
    import { mapGetters } from 'vuex'
    import { mapState } from 'vuex'
    import { mapMutations } from 'vuex'
    import { mapActions } from 'vuex'
  export default {
          data () {
            return{  
                  popupVisible2: false, 
                  newsjson:{
                     mytext:'',
                     myname:'',
                     count_zan:'',
                     count_collect:'',
                    new_pinglun:[]
                  }         
                                 
            }           
          },
         watch: {
              popupVisible2(val) {
                if (val) {
                  setTimeout(() => {
                    this.popupVisible2 = false;
                  }, 800);
                };
              }
         },
        methods:{            
           addtext(newsjson){
             if(this.newsjson.myname!==''&&this.newsjson.mytext!==''){
               this.$store.commit("addNewtext",{user:newsjson.myname,content:newsjson.mytext,count_zan:newsjson.count_zan,
               count_collect:newsjson.count_collect,new_pinglun:newsjson.new_pinglun});
               
               this.newsjson.mytext='',
               this.newsjson.myname='',
               this.popupVisible2 = true
             }                  
            }
          
        }
      
  }
</script>
<style>
  .head_top{
    height: 50px;
    width:100%;
   
  }
  .cancel{
    
    float: left;
  }
  .send{
    float: right;
  }
  #write{
    width: 100%;
    
  }
   .mint-popup-2 {
              width: 100%;
              height: 50px;
              text-align: center;
              background-color:#2E8B57;
              backface-visibility: hidden;
              z-index:3;
              color:white;
      }
</style>